<template>
  <div class=''>
    <publicDialog v-model:visible="visible" title="预算明细批量导入" width="30%" :footerButton="false">
      <div class="content">
        <el-upload accept=".xlsx" :http-request="uploadFile" :limit="1" :show-file-list="false" ref="uploadRef">
          <el-button class="button_edit">
            <el-icon>
              <Upload />
            </el-icon>上传文件
          </el-button>
        </el-upload>
        <el-button class="button_edit" @click="downFile('template')">
          <el-icon>
            <Download />
          </el-icon>下载模板
        </el-button>
        <div class="d-flex flex-column" style="margin-top: 22px;">
            <el-button class="button_edit" @click="downFile('error')">
                <el-icon>
                    <Download />
                </el-icon>下载错误文件
            </el-button>
            <span class="m-t5" style="color: red;font-size: 12px;cursor: default;">上传失败后,可下载文件查看错误原因</span>
        </div>
      </div>
    </publicDialog>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElButton, ElIcon, ElUpload, ElNotification } from "element-plus";
import { Upload, Download } from "@element-plus/icons-vue";
import { fileExportApi } from "@/api/businessFinance";
import { exportExcelFile } from "@/common/utils/GlobalUtils";
import PublicDialog from "@/components/PublicDialog.vue";

let visible = ref(false);
let uploadRef = ref(null)

let uploadFile = async (file) => {
  let uploadData = new FormData();
  uploadData.append('file', file.file);
  let res = await fileExportApi.uploadFile(uploadData)
  if (res.code === "200") {
    ElNotification({
      title: '上传成功',
      type: 'success',
    })
  }
  uploadRef.value.clearFiles()
}

let downFile = async (str) => {
  if (str === "template") {
    let res = await fileExportApi.downloadTemplate()
    exportExcelFile(res, "导入模板文件");
  } else if (str === "error") {
    let res = await fileExportApi.downloadError()
    exportExcelFile(res, "导入失败文件");
  }
}

defineExpose({ visible });
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>
